/*
  *= require 'swiper.min'
  *= require 'sweetalert'
*/
$headerH: 55px;
$color-brown: #a28356;
$color-gray: #9b9b9b;


// 小型的宽度
$min-container: 980px;
@import "bootstrap-sprockets";
@import "./innoawards/2015/bootstrap-custom";
@import "./lib/2016/icon-fonts";

html,
body {
  overflow-x: hidden;
  font-size: 16px;
}

$normalFont: 'PingFang SC', 'Lantinghei SC Extralight', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Microsoft Yahei', 'Arial', sans-serif;
$boldFont: 'Helvetica Neue', 'Helvetica', 'Lantinghei SC', 'STHeitiSC', 'Microsoft Yahei', 'Arial', sans-serif;

body {
  font-family: $normalFont;
  -webkit-font-smoothing: antialiased;
  background-color: #0A0A0A;
  background-image: image_url('innoawards/2016/body-bg.jpg');
  background-repeat: no-repeat;
  background-size: 100% auto;
}

a,a:hover,a:focus {
  text-decoration: none;
}

.container {
  &:after,
  &:before {
   display: none;
  }
}

.highlight {
  color: $color-brown;
}

.flex-wrapper {
  display: flex;
}

.btn-fade {
  opacity: 1;
  transition: opacity 0.3s;

  &:hover {
    opacity: 0.8;
  }
}

.response-img {
  position: relative;
  display: block;
  height: 0;
  width: 100%;
  padding-bottom: 61%;
  overflow: hidden;

  img {
   width: 100%;
  }

  &.cover img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
  }

  &.bottom img {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
  }
}

.sweet-alert button.cancel {
  background-color: #A28356;

  &:hover {
    background-color: #A28356;
  }
}

.tac {
  text-align: center;
}

.btn.theme-btn {
  border-radius: 3px;
  background: $color-brown;
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  padding: 5px 20px;
  letter-spacing: 1px;
  border: none;
  transition: all .3s;
  border: 1px solid rgba(0,0,0,0);
  &:hover {
   background: #fff;
   color: $color-brown;
  }
  &.hover-border:hover {
   border-color: $color-brown;
  }
}

#share-guide {
  position: fixed;
  z-index: 55;
  background-color: rgba(0, 0, 0, 0.7);
  height: 100vh;
  text-align: right;
  display: none;

  img {
    width: 70%;
    margin-right: 20px;
    margin-top: 10px;
  }

  &.show {
    display: block;
  }
}

$elementRatio: 2392px/1196px;
@mixin bg-element($width) {
  width: $width;
  height: 0;
  padding-bottom: $width / $elementRatio;
  background-image: image_url('innoawards/2016/element.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
}


@mixin zIndexShadow($index: 1) {
  @if($index == 1) {
   box-shadow: 0 3px 17px 0 rgba(0,0,0,0.2);
  }
}

$iconLogoRatio: 314/366;
@mixin icon-logo($width) {
  width: $width;
  height: 0;
  padding-bottom: $width / $iconLogoRatio;
  background-image: image_url('innoawards/2016/icon-logo.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@mixin aCenterTrans {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.a-center-trans {
  @include aCenterTrans;
}

@mixin prev-arrow($color) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23#{$color}'%2F%3E%3C%2Fsvg%3E");
}

@mixin next-arrow($color) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23#{$color}'%2F%3E%3C%2Fsvg%3E");
}

@mixin arrow-anim($w) {
  width: $w;
  display: inline-block;
  animation: arrow1 0.5s linear 0s infinite;
  font-weight: normal;

  &:last-child {
    animation-name: arrow2;
  }
}


$visZoom: 0.55;
.vis {
  display: inline-block;
  background-image: image_url("innoawards/2016/vis.png");
  background-size: 3007px *$visZoom 674px * $visZoom;
  background-repeat: no-repeat;

  &.viselem-01 {
    width: 602px * $visZoom;
    height: 675px * $visZoom;
    background-position: 0 0;
  }

  &.viselem-02 {
    width: 371px * $visZoom;
    height: 538px * $visZoom;
    background-position: -629px * $visZoom 0;
  }

  &.viselem-03 {
    width: 213px * $visZoom;
    height: 424px * $visZoom;
    background-position: -1025px * $visZoom 0;
  }

  &.viselem-04 {
    width: 544px * $visZoom;
    height: 615px * $visZoom;
    background-position: -1263px * $visZoom 0;
  }

  &.viselem-05 {
    width: 302px * $visZoom;
    height: 342px * $visZoom;
    background-position: -1830px * $visZoom 0;
  }

  &.viselem-06 {
    width: 248px * $visZoom;
    height: 284px * $visZoom;
    background-position: -2160px * $visZoom 0;
  }

  &.viselem-07 {
    width: 247px * $visZoom;
    height: 285px * $visZoom;
    background-position: -2435px * $visZoom 0;
  }

  &.viselem-08 {
    width: 114px * $visZoom;
    height: 131px * $visZoom;
    background-position: -2697px * $visZoom 0;
  }

  &.viselem-09 {
    width: 183px * $visZoom;
    height: 210px * $visZoom;
    background-position: -2824px * $visZoom 0;
  }
}

@keyframes viaRotateY {
  from {
    transform: rotateY(360deg);
  }
  to {
    transform: rotateY(0);
  }
}

@keyframes viaRotateLoseY {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}


@keyframes viaTranslateX {
  from {
    opacity: 0;
    transform: translateX(50%);
  }
  to {
    opacity: 1;
    transform: rotateX(0);
  }
}

@keyframes viaTranslateLoseX {
  from {
    opacity: 0;
    transform: translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes viaOpacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes flashing {
  6%, 18% {
    filter: blur(0);
    opacity: 0.2;
  }

  12% {
    filter: blur(2px);
    opacity: 1;
  }

  0%, 24%, 100%{
    filter: blur(0);
    opacity: 1;
  }
}

// arrow anima
@keyframes arrow1{
  from {
    transform: translateX(0);
    opacity: 0;
  }
  to {
    transform: translateX(10px);
    opacity: 1;
  }
}

@keyframes arrow2{
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(10px);
    opacity: 0;
  }
}


//share
@import './innoawards/2016/header';
@import './innoawards/2016/footer';
@import './innoawards/2016/product_list';
@import './innoawards/2016/product_share';

body.innoawards_index{
  // innoawards page
  @import './innoawards/2016/titlebar.scss';
  @import './innoawards/2016/banner';
  @import './innoawards/2016/awards';
  @import './innoawards/2016/agenda';
  @import './innoawards/2016/press';
  @import './innoawards/2016/partners';
  @import './innoawards/2016/vote';
}

// product page
body.products_new {
  @import './products/2016/new';
}

body.products_show {
  @import './products/2016/show';
  @import './products/2016/product_other';
  @import './products/2016/product_screenshots';
  @import './products/2016/duoshuo';
}

body.products_success {
  @import './products/2016/product_success';
}
